<template>
  <div class="carModel">
    <div>
      <PublicTop :index="1" />
    </div>
    <div ref="main" class="lin"></div>
    <div class="text">
      <div class="top">
        <div>车辆总数</div>
      </div>
      <div class="bom">
        <span>
          <animate-number from="0" :to="fieldObj.carCount || 0" :key="fieldObj.carCount || 0"
            class="number"></animate-number>
        </span>
        台
      </div>
    </div>
  </div>
</template>

<script>
import PublicTop from "./../publicTop/index.vue";
import * as echarts from "echarts";
import { getGetCarBrandModelCount } from "@/api/dataV/index";
export default {
  name: "CarModel",
  components: { PublicTop },
  data() {
    return {
      myChart: null,

      option: {
        xAxis: {
          type: "category",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },

          data: [],
          axisLabel: {
            show: true, // 是否显示刻度标签，默认显示
            interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
            rotate: 0, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
            inside: false, // 刻度标签是否朝内，默认朝外
            margin: 6, // 刻度标签与轴线之间的距离
            formatter: "{value}", // 刻度标签的内容格式器
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false, //不显示坐标轴刻度线
          },
          axisLine: {
            show: false, //不显示坐标轴线
          },
          axisLabel: {
            show: false, //不显示坐标轴上的文字
          },
          splitLine: {
            //网格线
            show: false,
          },
        },
        series: [
          {
            data: [],
            type: "bar",
            barWidth: 13,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(255, 255, 255, 0.1)",
            },
            itemStyle: {
              normal: {
                //柱体的颜色
                //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, // x1, y1, x2, y2 定义渐变方向
                  [
                    { offset: 0, color: "#74f0ff" },
                    { offset: 0.5, color: "#50E3C2" },
                    { offset: 1, color: "#2681FF" },
                  ]
                ),
              },
            },
            label: {
              show: true,
              position: "top",
            },
          },
        ],
      },
      fieldObj: {},
      trme: null,
    };
  },
  watch: {
    "$store.state.fieldObj": {
      handler: function (o) {
        this.option = o;
      },
    },
  },
  beforeDestroy() {
    clearInterval(this.trme);
  },
  mounted() {
    window.addEventListener("resize", this.resizeView);
    const store = this.$store.state.fieldObj;
    if (JSON.stringify(store) !== "{}") {
      this.fieldObj = store;
    }
    this.myChart = echarts.init(this.$refs.main);
    this.init();
    // option && ;
  },
  methods: {
    init() {
      this.query();
    },
    resizeView() {
      setTimeout(() => this.myChart.resize(), 500);
    },
    query() {
      getGetCarBrandModelCount().then((res) => {
        let data = [];
        let xAxis = [];
        res.map((v) => {
          data.push(v.y);
          xAxis.push(v.x);
        });
        this.option.xAxis.data = xAxis;
        this.option.series[0].data = data;
        this.myChart.setOption(this.option);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.carModel {
  width: 100%;
  height: 100%;
  background: url(@/assets/datav/itembg.png) no-repeat;
  position: relative;

  .lin {
    width: 100%;
    height: 3.3rem;
  }

  .text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.8rem;
    background: rgba(0, 123, 255, 0.1);

    .top {
      color: rgb(30, 255, 255);
      font-size: 0.2rem;
      margin-left: 1%;
    }

    .bom {
      font-size: 0.2rem;
      color: rgb(30, 255, 255);
      text-align: right;
      margin-bottom: 1%;
      margin-right: 1%;

      span {
        font-size: 0.3rem;
        color: #f27a24;
      }
    }
  }
}
</style>
